<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="custom/js/listServicePage.js"></script>
<jsp:include page="core/templates/header.jsp"></jsp:include>
</head>
<body class="header1 activateAppearAnimation">
	<div id="globalWrapper">
		<jsp:include page="core/templates/mainMenu.jsp"></jsp:include>
		<jsp:include page="core/templates/banner.jsp"></jsp:include>
		<!-- Content -->
		<section style="background: url('core/images/feature.png') repeat;">
			<div class="container">

				<div class="row textColorBlack mt30">
					<div class="col-md-12 pb15">
						<h2>แสดงรายการบริการทั้งหมดที่ต้องการ</h2>
					</div>
				</div>
				<div class="row mb30">
					<div class="col-md-3">
						<div class="row">
							<div class="col-md-12 mt15 " style="margin: auto;">
								<s:form action="listServicePage" method="post" theme="css_xhtml"
									id="myform" name="myform">
									<div class="boxFocus color1">
										<div class="row">
											<div class="col-md-12">
												<div>
													<input type="text" class=" form-control"
														name="model.searchForm.keyword"
														placeholder="ระบุบริการที่ต้องการค้นหา">
												</div>
											</div>
										</div>
										<div class="row mt05">
											<div class="col-md-12">
												<div>
													<b>หมวดหมู่ของบริการ :</b>
												</div>
												<div>
													<s:select headerKey="0" headerValue="--- ทั้งหมด ---"
														value="0" list="model.listAptitudeType"
														listKey="aptitudeTypeID" listValue="aptitudeTypeName"
														cssClass="form-control"
														name="model.searchForm.aptitudeType" />

												</div>
											</div>
										</div>
										<div class="row mt05">
											<div class="col-md-12">
												<div>
													<b>จังหวัดของผู้ให้บริการ</b>
												</div>
												<div>
													<select class="form-control"
														name="model.searchForm.workArea">
														<option value="0">--- เลือก ---</option>
														<option>เชียงใหม่</option>
														<option>เชียงราย</option>
														<option>แพร่</option>
														<option>น่าน</option>
														<option>ลำปาง</option>
													</select>
												</div>
											</div>
										</div>
										<div class="row mt05">
											<div class="col-md-12">
												<div>
													<b>ระดับความน่าเชื่อถือของบริการ</b>
												</div>
												<div>
													<s:select headerKey="0" headerValue="--- ทั้งหมด ---"
														value="0"
														list="#{'5':'ระดับที่ 5 มากสุด','4':'ระดับที่ 4 มาก','3':'ระดับที่ 3 ปานกลาง',
													'2':'ระดับที่ 2 พอใช้','1':'ระดับที่ 1 น้อยสุด'}"
														cssClass="form-control" name="model.searchForm.trust" />
												</div>
											</div>
										</div>
										<div class="row">
											<div class="col-md-12">
												<button type="submit"
													class="col-md-12 col-xs-12 col-sm-12 btn btn-info mt15">
													<div>
														<i class="icon-search"></i><span class="font4">
															ค้นหาบริการ</span>
													</div>
												</button>
											</div>
										</div>
									</div>
								</s:form>
							</div>
						</div>


						<div class="row">
							<div class="col-md-12 mt15">
								<div class="row">
									<div class="col-md-12">
										<span class="font4"><b>หมวดหมู่บริการ</b></span>
									</div>
								</div>
								<s:iterator value="model.listAptitudeType">
									<div class="row">
										<div class="col-md-12 col-xs-6 col-sm-6 mt05"
											style="margin-left: 1em;">
											<div class="media">
												<a class="pull-left" href="#"><img
													class="img-circle img-responsive"
													src="<s:property value="image_icon"/>" alt=""
													style="width: 40px;"> </a>
												<div class="media-body">
													<a href="#"> <span class="font5"><b><s:property
																	value="aptitudeTypeName" /></b></span>
													</a><br> <span class="font5">งานที่มีทั้งหมด <s:property
															value="countSumService" /> งาน
													</span>
												</div>
											</div>
										</div>
									</div>
								</s:iterator>
								<div class="row mt15 mb05">
									<div class="col-md-12">
										<hr class="lineLines">
									</div>
								</div>
								<div class="row">
									<div class="col-md-12">
										<span class="font4"><b>บริการใหม่ล่าสุด</b></span>
									</div>
								</div>
								<div class="row">
									<div class="col-md-12">
										<ul class="list-unstyled iconList borderList">
											<s:iterator value="model.listServiceLastUpdate">
												<li><a href="#" class=""><s:property
															value="service.serviceName" /></a></li>
											</s:iterator>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-9">
						<s:form action="searchServiceByCondition" theme="css_xhtml"
							id="myform" name="myform" method="post">
							<s:hidden name="model.searchForm.keyword"
								value="%{model.searchForm.keyword}" />
							<s:hidden name="model.searchForm.trust"
								value="%{model.searchForm.trust}" />
							<s:hidden name="model.searchForm.workArea"
								value="%{model.searchForm.workArea}" />
							<s:hidden name="model.searchForm.jobType"
								value="%{model.searchForm.jobType}" />
							<s:hidden name="model.searchForm.orderBy" id="orderBy" />
							<s:hidden name="model.pageCurrentNo" id="pageCurrentNo" />

							<s:if test="model.listServiceByCondition.size==0">
								<div class="row">
									<div class="col-md-12 mb05">
										<div class="color0 boxcontent text-center">
											ไม่พบรายการที่ต้องการค้นหา</div>
									</div>
								</div>
							</s:if>
							<s:else>
								<div class="row">
									<div class="col-md-12 mb05">
										<div class="color0 boxcontent text-center">
											<div class="row textColorBlack">
												<div class="col-md-4 mb05">
													จำนวนบริการทั้งหมด
													<s:property value="model.listTotalRow" />
													บริการ เรียงตาม
												</div>
												<div class="col-md-4 mb05">
													<s:select headerKey="0" headerValue="--- ทั้งหมด ---"
														list="#{'1':'บริการที่ประกาศล่าสุด','2':'บริการที่มีผู้ร้องขอมากสุด','3':'บริการที่มีความน่าเชื่อถือมากสุด'}"
														cssClass="form-control" onchange="orderByCondition();"
														id="changeOderBy" />
												</div>
												<div class="col-md-4 mb05">
													แสดงบริการลำดับที่
													<s:property value="model.listFirstRowNo" />
													ถึง
													<s:property value="model.listLastRowNo" />
												</div>
											</div>
										</div>
									</div>
									<div class="col-md-12">
										<div class="color0 boxcontent">
											<s:iterator value="model.listServiceByCondition">
												<div class="row">
													<div class="col-md-2 col-xs-3" align="center">
														<figure>
															<img
																src="http://www.localcrimenews.com/wp-content/uploads/2013/07/default-user-icon-profile.png"
																alt="" class="media-object img-thumbnail">
															<div class="mt05">
																<small><b>ระดับความน่าเชื่อถือของผู้ให้บริการ</b></small>
															</div>
															<div>
																<small><span class="textColorYelow"> <s:iterator
																			var="counter" begin="1" end="user.trustLevel">
																			<i class="icon-star"></i>
																		</s:iterator> <s:iterator var="counter" begin="1"
																			end="5 - user.trustLevel">
																			<i class="icon-star-empty"></i>
																		</s:iterator>
																</span></small>
															</div>
														</figure>
													</div>
													<div class="col-md-10 col-xs-9">
														<p class="media-heading font3 mb05 textColorBlack">
															<b><s:property value="service.serviceName" /></b>
														</p>
														<ul class="entry-meta">
															<li class="entry-comments font6 mb05"><a href="#"><i
																	class=" glyphicon glyphicon-tag"></i> &nbsp;ค่าบริการ <s:property
																		value="service.priceRange" /> </a></li>
															<li class="entry-comments font6 mb05"><a href="#"><i
																	class="glyphicon glyphicon-bell"></i>&nbsp;ร้องขอใช้บริการ
																	<s:property value="amountRequestPost" /> ครั้ง</a></li>
															<li class="entry-comments font6 mb05"><a href="#"><i
																	class="icon-pin"></i>&nbsp;วันที่โพส <s:property
																		value="postDate" /></a></li>
														</ul>
														<b class="textColorBlack">หมวดหมู่บริการ :</b> <span
															class="tags"><s:property
																value="listAptitude[0].aptitudeType.aptitudeTypeName" /></span><br>
														<b class="textColorBlack">จังหวัดของผู้ให้บริการ : </b>
														<s:property value="user.listAddress[0].province" />
														<br> <b class="textColorBlack">รายละเอียด : </b>
														<s:property value="service.descriptionOfService" />
														<div align="right" class="mt05">
															<s:a href="serviceDetail?model.postServiceId=%{postID}"><button type="button"
																	class="btn btn-success btn-xs">
																	<span class="fontHeader4"><i
																		class="icon-th-list iconSmall"></i> ดูรายละเอียด</span>
																</button></s:a>
														</div>
													</div>
												</div>
												<hr class="lineLines">
											</s:iterator>
											<s:if test="model.totalPage!=0 && model.totalPage!=1">
												<div class="row">
													<div class="col-md-12 textCenter">
														<ul class="pagination ">
															<li class="disabled"><a href="#">«</a></li>
															<s:iterator var="counter" begin="1" end="model.totalPage">
																<s:if test="model.pageCurrentNo == #counter">
																	<li class="active"><a href="#"><s:property
																				value="top" /><span class="sr-only">(current)</span></a></li>
																</s:if>
																<s:else>
																	<li><a href="#"
																		onclick="selectPage(<s:property value="top" />);"><s:property
																				value="top" /></a></li>
																</s:else>
															</s:iterator>
															<li><a href="#">»</a></li>
														</ul>
													</div>
												</div>
											</s:if>
										</div>
									</div>
								</div>
							</s:else>
						</s:form>
					</div>
				</div>
			</div>
		</section>
		<!-- Content -->
		<jsp:include page="core/templates/footer.jsp" />
	</div>
</body>
</html>